 <template>
  <el-container>
    <el-main>
      <el-row class="table-wrapper">   
        <el-col :span='24'>  
          <el-form :inline="true" ref="form" :model="form" label-width="80px"> 
              <el-form-item label="分站">
                <el-select v-model="form.namespace">
                    <el-option
                      v-for="site in sites"
                      :key="site.namespace"
                      :label="site.namespaceDesc"
                      :value="site.namespace" />
                </el-select>
              </el-form-item>
              <el-form-item label="配置权限">
                <el-select v-model="form.configAccess">
                    <el-option
                      v-for="item in accesses"
                      :key="item"
                      :label="item"
                      :value="item" />
                </el-select>
              </el-form-item>
              <el-form-item label="配置名">
                  <el-input v-model="form.configKey" clearable></el-input>
              </el-form-item>
                <el-form-item label="配置值">
                  <el-input v-model="form.configValue" clearable></el-input>
              </el-form-item>
              <el-form-item>
                  <el-button type="primary" @click="onSubmit">创建</el-button>
              </el-form-item>
          </el-form>
        </el-col>
      </el-row>
     
      <div class="table_container">
        <el-table
          :data="keyvalues"
          v-loading="tableLoading"
          highlight-current-row
          style="width: 100%">
          
          <el-table-column
            property="id"
            label="序号"
            width="80">
          </el-table-column>
          <el-table-column
            property="namespace"
            label="分站"
            width="150">
          </el-table-column>
          <el-table-column
            property="configAccess"
            label="配置权限"
            width="150">
          </el-table-column>
          <el-table-column
            property="configKey"
            label="配置名"
            width="150">
          </el-table-column>
          <el-table-column
            label="配置值"
            width="400">
            <template slot-scope="scope">
              <div v-if="role === 'SUPER_ADMIN'">
                <el-input v-model="scope.row.configValue" style="width: 300px"></el-input>
                <el-button type="primary" @click="updateValue(scope.row)">更新</el-button>
              </div>
              <div v-else>
                {{scope.row.configValue}}
              </div>
            </template>
          </el-table-column>
          <el-table-column
              label="状态"
              width="130"
              v-if="role === 'SUPER_ADMIN'">
              <template slot-scope="scope">
                <el-button type="primary" @click="updateStatus(scope.row)" v-if='scope.row.status !== "ENABLE"'>生效</el-button>
                <el-button type="primary" @click="updateStatus(scope.row)" v-if='scope.row.status === "ENABLE"'>失效</el-button>
              </template>
          </el-table-column>
        </el-table>
        <div class="Pagination" style="text-align: left;margin-top: 10px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20, 50, 80, 100]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
    import {setKeyValue, updateKeyValue, allKeyValue} from '@/api/keyvalue'
    import {allSite} from '@/api/site'
    import {SUPER_ADMIN} from '@/utils/cookie'
    import { mapState } from 'vuex';

    export default {
      data () {
        return {
          form: {
            namespace: '',
            configAccess: '',
            configKey: '',
            configValue: ''
          },
          sites: [],
          accesses: ['PUBLIC', 'FRONT', 'BACKGROUND'],
          currentPage: 1,
          limit: 20,
          total: 0,
          tableLoading: false,
          keyvalues: []
        }
      },
      computed: {
        ...mapState(['role'])
      },
      mounted () {
        this.initData()
      },
      methods: {
        async initData () {
          this.allKeyValue()
          if (this.role === SUPER_ADMIN) {
            this.allSites()
          }
        },
        async allKeyValue () {
          this.tableLoading = true
          try {
            let result = await allKeyValue()

            if (result.status === 200 && result.data.code === 200) {
              this.keyvalues = result.data.data
              this.total = result.data.page.total
            } else {
              throw new Error('获取数据失败')
            }
          } catch (err) {
            // this.$message.error('获取数据失败')
            console.log('获取数据失败', err)
          }
          this.tableLoading = false
        },

        async createKeyValue () {
          let loading = this.$loading({
            lock: true,
            text: '正在加载',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          try {
            let result = await setKeyValue(this.form)
            if (result.status === 200 && result.data.code === 200) {
              this.allKeyValue()
              this.$message({
                  message: `配置项${this.form.configKey}已创建成功`,
                  type: 'success'
                })
              
            } else {
              throw new Error('创建角色失败')
            }
          } catch (err) {
            console.log('创建角色失败', err)
          } finally {
            loading.close()
          }
        },
        async allSites () {
          try {
            let result = await allSite()

            if (result.status === 200 && result.data.code === 200) {
              this.sites = result.data.data
            } else {
              throw new Error('获取数据失败')
            }
          } catch (err) {
            // this.$message.error('获取数据失败')
            console.log('获取数据失败', err)
          }
        },
        onSubmit () {
          this.createKeyValue()
        },

        async updateStatus (data) {
          let loading = this.$loading({
            lock: true,
            text: '正在加载',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          try {
            let result = await updateKeyValue({
              id: data.id,
              // configValue: data.configValue,
              status: data.status === 'ENABLE' ? 'CANCELED' : 'ENABLE'
            })
            if (result.status === 200 && result.data.code === 200) {
              this.allKeyValue()
            } else {
              throw new Error('修改状态失败')
            }
          } catch (err) {
            console.log('修改状态失败', err)
          } finally {
            loading.close()
          }
        },
        async updateValue (data) {
          let loading = this.$loading({
            lock: true,
            text: '正在加载',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          try {
            let result = await updateKeyValue({
              id: data.id,
              configValue: data.configValue,
              status: data.status
            })
            if (result.status === 200 && result.data.code === 200) {
              this.allKeyValue()
            } else {
              throw new Error('修改状态失败')
            }
          } catch (err) {
            console.log('修改状态失败', err)
          } finally {
            loading.close()
          }
        },
        handleSizeChange (size) {
          this.limit = size
          this.allKeyValue()
        },
        handleCurrentChange (page) {
          this.currentPage = page
          this.allKeyValue()
        },
      }
    }
</script>

<style lang="less" scoped>
    @import '../../style/mixin';
    .label-title{
        font-weight: bold;
        font-size: 24px;
        color: #ff633b;
        margin: 30px;
    }
    .manage_tip {
      margin-bottom: 10px;
    }
    .introduct{
        width: 900px;
        text-align: center;
        margin: auto;
    }
    .tip {
        font-size: 12px;
    }
    .tip strong {
        color: red;
        font-weight: bold;
    }

    .table-wrapper {
        border: 1px solid #ebeef5;
        margin: 30px 0;
        padding-top: 20px;
        padding-left: 10px;
    }
    // .el-button {
    //   width: 200px;
    //   margin: auto;
    //   display: block;
    // }
    .el-table .info-row {
        background: #c9e5f5;
    }

    .el-table .positive-row {
        background: #e2f0e4;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }

    .batch-dialog{
    }
    .batch-table{
        max-height: 400px;
        overflow: auto;
    }
</style>

 